<template>
    <div class="page">
        <el-row :gutter="20">
            <el-col :span="24" :xs="24" :sm="24" :lg="24">
                <div class="grid-content bg-purple">
                    <div class="panel">
                        <div class="panel-body">
                            <el-row :gutter="20">
                                <el-col :span="4">
                                    <h5>站点账单</h5>
                                </el-col>
                                <el-col :span="6" :offset="8">
                                    <div class="block">
                                        <el-date-picker
                                            v-model="queryParams.month"
                                            align="right"
                                            type="month"
                                            value-format="yyyy-MM"
                                            placeholder="选择日期"
                                        >
                                        </el-date-picker>
                                    </div>
                                </el-col>
                                <el-col :span="6">
                                    <el-input placeholder="请输入站点名称" v-model="queryParams.service_name"  class="input-with-select">
                                        <el-button slot="append" icon="el-icon-search" @click="queryList"></el-button>
                                    </el-input>
                                </el-col>
                            </el-row>
                        </div>
                    </div>
                </div>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="24" :xs="24" :sm="24" :lg="24">
                <div class="grid-content bg-purple">
                    <div class="panel">
                        <div class="panel-body">
                            <el-row :gutter="20">
                                <el-col :span="24" :xs="24" :sm="24" :lg="24">
                                    <el-row :gutter="20" v-loading="listLoading">
                                        <el-col :span="8" v-for="(v,k) in listData.data" :key="k" >
                                            <el-card class="box-card">
                                                <div slot="header" class="clearfix">
                                                    <el-row type="flex"  justify="space-between" :gutter="20">
                                                        <el-col :span="6"><h5 class="whiteFont">{{v.service_name}}</h5></el-col>
                                                        <el-col :span="12"><h5 class="whiteFont">{{v.start_time}} —— {{v.end_time}}</h5></el-col>
                                                    </el-row>
                                                </div>
                                                <div class="text item">
                                                    <p style="margin-top: 5px"><span class="detail-title">快件</span></p>
                                                    <p>签收件：{{v.total_sign}}</p>
                                                    <p>收入：{{v.total_income}}</p>
                                                    <p>手续费：{{v.charge}}</p>
                                                    <p style="margin-top: 20px"><span class="detail-title">结算</span></p>
                                                    <p>结算状态：{{v.status==1?"已结算":"未结算"}}</p>
                                                    <p>交易流水号：{{v.number}}</p>
                                                </div>
                                            </el-card>
                                        </el-col>
                                    </el-row>
                                </el-col>
                            </el-row>
                        </div>
                        <div class="panel-footer text-right">
                            <el-pagination @size-change="sizeChange" @current-change="currentChange"
                                           :current-page="queryParams.page"
                                           :page-sizes="[8, 10, 20, 50]"
                                           :page-size="queryParams.paginate"
                                           layout="total, sizes, prev, pager, next, jumper"
                                           :total="listData.total">
                            </el-pagination>
                        </div>
                    </div>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    import api from '../apis'
    export default {
        name: "Balance",
        data(){
            return {
                //列表加载动画
                listLoading:false,
                //列表请求参数
                queryParams:{
                    months:'',
                    service_name:'',
                    page:1,
                    paginate:8,
                },
                //列表数据
                listData:{
                    data:[],
                    total:0,
                },
            }
        },
        methods:{
            /**
             * 请求列表
             */
            queryList(){
                this.listLoading = true;
                api.balance.fetch(this.queryParams).then(response=>{
                    this.listData =  response.data;
                    this.listLoading = false;
                }).catch(errors=>{
                    this.$message.error('请求失败');
                })
            },
            /**
             * 列表改变每页数量
             * @param size
             */
            sizeChange(size){
                this.queryParams.paginate = size;
                this.queryList();
            },
            /**
             * 列表改变当前页
             * @param page
             */
            currentChange(page){
                this.queryParams.page = page;
                this.queryList();
            },
        },
        mounted(){
            this.queryList();
        },
    }
</script>

<style lang="scss" scoped>
    .el-date-editor.el-input, .el-date-editor.el-input__inner{
      width: 100%;
    }
    .detail-title{
        border-left: rgba(248,154,55,1) 2px solid;
        padding-left: 5px;
        font-size: 18px;
    }
    .box-card{
        margin-top: 20px;
    }
    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }
    .clearfix:after {
        clear: both
    }

</style>
